import React, { Component } from 'react';
import "./goodDetail.scss"
import { NavBar, Icon,Carousel } from "antd-mobile"
import myAxios from "../../utils/myaxios"

class goodDetail extends Component {
  constructor(props) {
    super(props)
  }
  state = {
    swiper_data: [],
    goodInfo :{},
  }
  // 生命周期函数：挂载
  componentDidMount(){
    //获取url的参数
    let {goods_id} = this.props.match.params
    myAxios.get("https://www.linweiqin.cn/api/public/v1/goods/detail",{
      params:{
        goods_id:parseInt(goods_id)
      }
    })
    .then(res=>{
      this.setState({
        swiper_data:res.data.message.pics,
        goodInfo:res.data.message,
      })
      console.log(this.state.goodInfo);
      console.log(this.state.goodInfo.pics);
      console.log(this.state.swiper_data);
    })
  }
  //事件
  //点击返回按钮
  onLeftClick = (params) => {
    this.props.history.go(-1);
  }
  render() {
    return (
      //1.handleClickSwiper(good_id){this.props.history.push("goodDetail"+val.good_id)}
      //2. <Route exact path="/goodDetail" render={(props)=><GoodDetail {...props}></GoodDetail>}></Route>
      //3.console.log(props) => {history:{...},location:{...},match:{...}}
      <div className="ygDetail">
        {/* 头部 */}
        <div className="detailHeader">
          <NavBar
            className="detailHeader"
            icon={<Icon type="left" />}
            onLeftClick={this.onLeftClick}
          >商品详情</NavBar>
        </div>
        {/* 轮播图 */}
        <div className="detailSwiper">
          <Carousel autoplay={false} infinite slideWidth={0.8}>
            {this.state.swiper_data.map((val,i) => 
              <div
                key={i}
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
              >
                <img
                  src={val.pics_mid}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </div>
            )}
          </Carousel>
        </div>
        {/* 价格 */}
        <div className="price">
          <div className="priceLeft">
            <i className="iconfont icon-renminbi"></i>
                <span>{this.state.goodInfo.goods_price}</span>
          </div>
          <div className="priceRight">
            <i className="iconfont icon-fenxiang"></i>
            <i className="iconfont icon-shoucang"></i>
          </div>
        </div>
        {/* 图文详情 */}
        <div className="goodInfo">
          <div className="goodInfoTitle">图文详情</div>
          <div className="goodInfoRichText"
            dangerouslySetInnerHTML={{__html:this.state.goodInfo.goods_introduce}}
            ></div>
        </div>
        {/* 底部工具栏 */}
        <div className="detailBottom">
          <div className="contact">
            <i className="iconfont icon-lianxi"></i>
            <span>联系客服</span>
          </div>
          <div className="cart">
            <i className="iconfont icon-gouwuche"></i>
            <span>购物车</span>
          </div>
          <div className="addToCart">加入购物车</div>
          <div className="buyNow">立即购买</div>

        </div>
      </div>
    );
  }
}

export default goodDetail;
